<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')

        // input.addEventListener('keyup', function () {
        //     console.log('发送请求')
        // })
        const sendMsg = function () {
            console.log('发起请求')
            console.log(this)
            console.log(this.value)
        }
        // input.addEventListener('keyup', sendMsg)

        // 想做防抖
        const debounce = (fn, ms = 0) => {
            let timerId
            return function () {
                clearTimeout(timerId)
                timerId = setTimeout(() => {
                    // 箭头函数this定义的时候就确定了，指向上层，上层指向的是input
                    fn.call(this)
                }, ms)
            }
        }
        input.addEventListener('keyup', debounce(sendMsg, 1000))

        // 我们用debounce函数包装了sendMsg，但是并不希望sendMsg中的this指向改变，所以
        // 在封装debounce的时候，把this指向绑定一下
    </script>
</body>

</html>